<template>
  <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/xatu1.png" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form label-width="0px" class="login_form">
                <el-form-item>
                    
                <el-switch
                    style="display: block"
                    v-model="isStudent"
                    active-color="#13ce66"
                    inactive-color="#409EFF"
                    active-text="学生"
                    inactive-text="管理"
                    class="switch"
                    v-show="!isRegister"
                    >
                </el-switch>
                </el-form-item>
                <!-- 用户id -->
                <el-form-item>
                    <el-input v-model.trim="Form.id" prefix-icon="el-icon-user-solid" placeholder="请输入id" v-show="!isRegister"></el-input>
                </el-form-item> 
                <!-- 姓名 -->
                <el-form-item>
                    <el-input v-model.trim="Form.name" prefix-icon="el-icon-user-solid" placeholder="请输入姓名" v-show="isRegister"></el-input>
                </el-form-item> 
                <!-- 密码 -->
                <el-form-item>
                    <el-input type="password" v-model.trim="Form.password" prefix-icon="el-icon-warning" placeholder="请输入密码"></el-input>
                </el-form-item> 
                <!-- 手机号 -->
                <el-form-item>
                    <el-input type="tele" v-model.trim="Form.mobile" prefix-icon="el-icon-warning" placeholder="请输入手机号" v-show="isRegister"></el-input>
                </el-form-item> 
                <!-- 邮箱 -->
                <el-form-item>
                    <el-input type="text" v-model.trim="Form.email" prefix-icon="el-icon-warning" placeholder="请输入邮箱地址" v-show="isRegister"><template slot="append">@qq.com</template></el-input>
                </el-form-item>
                <!-- 班级 -->
                <el-form-item>
                    <el-input type="text" v-model.number.trim="Form.classid" prefix-icon="el-icon-warning" placeholder="请输入班级号码" v-show="isRegister"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login" v-show="!isRegister">登录</el-button>
                    <el-button type="primary" @click="register" v-show="isRegister">注册</el-button>
                </el-form-item> 
                <el-form-item>
                    <el-link @click="go" v-show="!isRegister">点击注册<i class="el-icon-caret-right"></i> </el-link>
                    <el-link @click="go" v-show="isRegister">点击登录<i class="el-icon-caret-right"></i> </el-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {mapActions} from 'vuex';
    export default {
        name:'SysLogin',
        data() {
    return {
        isStudent:true,
        isRegister:false,
      //数据绑定
      Form: {
        id: '',
        name:'',
        password: '',
        mobile:'',
        email:'',
        classid:'',
      },
    }
  },

  methods: {
    ...mapActions('userOptions',{sendUser:'userLogin'}),
    ...mapActions('adminOptions',{sendAdmin:'adminLogin'}),
    go(){
        this.isRegister = !this.isRegister
    },
    login(){
      if(this.isStudent){
        axios.post('http://localhost:5000/SchoolManageSys_war_exploded/user/loginStudent.do',{
                studentid:parseInt(this.Form.id),
                studentpass:(this.Form.password).toString()
        }).then(
                    response =>{
                        console.log ('请求成功',response.data)
                        if(response.data){
                        this.$message.success('登录成功！')
                        window.sessionStorage.setItem('token',this.Form.id)
                        this.sendUser(response.data)
                        this.$router.push('/studenthome')
                        }else{
                          this.$message.error('用户名或密码错误！')
                          this.Form.id = ''
                          this.Form.password = ''
                        }
                    },
                    error => {
                        console.log('请求失败了！',error.message)
                    }
                )
      }else{
        axios.post('http://localhost:5000/SchoolManageSys_war_exploded/user/loginAdmin.do',{
                adminid:parseInt(this.Form.id),
                adminpass:(this.Form.password).toString()
        }).then(
                    response =>{
                        console.log ('请求成功',response.data)
                        if(response.data){
                          this.$message.success('登录成功!欢迎回来！')
                          window.sessionStorage.setItem('token',this.Form.id)
                          this.sendAdmin(response.data)
                          this.$router.push('/adminhome')
                        }else{
                          this.$message.error('用户名或密码错误！')
                          this.Form.id = ''
                          this.Form.password = ''
                        }
                    },
                    error => {
                        console.log('请求失败了',error.message)
                        this.$message.error('出错啦！',error.message)
                    }
                )
      }
    },
    register(){
      axios.post('http://localhost:5000/SchoolManageSys_war_exploded/user/registerStudent.do',{
              studentname:this.Form.name,
              studentpass:this.Form.password,
              studentemail:this.Form.email+'@qq.com',
              studentmobile:this.Form.mobile,
              classid:this.Form.classid
      }).then(
                response => {
                    console.log ('请求成功',response.data)
                    this.$message.success('注册成功！')
                },
                error =>{
                    console.log('请求失败了',error.message)
                    this.$message.error('注册失败...',error.message)
                }
      )
    }
    
  }
}

</script>

<style>
.login_container {
  background-color: rgb(28, 70, 70);
  height: 100%;
}
.login_box {
  width: 450px;
  height: 600px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
 
}
 .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #004ea2;
   
  }
 .avatar_box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.switch {
    text-align: center;
}
</style>